<template>
    <div class="person-management" v-loading="isLoading">
        <div class="header">
            <h1></h1>
            <div class="search-bar">
                <el-input v-model="searchQuery" placeholder="搜索姓名、职位或角色..." clearable style="width: 300px"
                    @input="handleSearch">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
                <el-select v-model="roleFilter" placeholder="按角色筛选" clearable style="width: 150px; margin-left: 10px"
                    @change="filterPersons">
                    <el-option v-for="role in roles" :key="role" :label="role" :value="role" />
                </el-select>
                <el-select v-model="sortField" placeholder="排序字段" clearable style="width: 150px; margin-left: 10px">
                    <el-option label="开发中" value="developingTasks" />
                    <el-option label="提测中" value="completedTasks" />
                    <el-option label="测试中" value="testingTasks" />
                    <el-option label="已超时" value="overdueTasks" />
                    <el-option label="BUG数" value="bugs" />
                </el-select>
                <el-select v-model="sortOrder" placeholder="排序顺序" style="width: 120px; margin-left: 10px">
                    <el-option label="降序" value="desc" />
                    <el-option label="升序" value="asc" />
                </el-select>
            </div>
        </div>
        <el-divider />
        <div class="card-container-wrapper">
            <div class="card-container">
                <template v-if="filteredPersons.length > 0">
                    <el-card v-for="person in filteredPersons" :key="person.id" class="person-card" shadow="hover"
                        :body-style="{ padding: '0px' }">
                        <div class="card-header">
                            <el-avatar :size="80" :src="person.avatar" />
                            <div class="header-info">
                                <h3>{{ person.name }}</h3>
                                <!-- <p class="position">{{ person.position }}</p> -->
                                <el-tag :type="getRoleTagType(person.role)" effect="dark" size="small">
                                    {{ getRoleName(person.role) }}
                                </el-tag>
                            </div>
                            <el-icon @click="showDetails(person)" class="header-info-icon1" size="20">
                                <List />
                            </el-icon>
                            <el-icon @click="sendMessage(person)" class="header-info-icon2" size="20">
                                <Comment />
                            </el-icon>
                        </div>

                        <div class="card-body">
                            <div class="stats-grid">
                                <div class="stat-item" v-for="stat in stats" :key="stat.label">
                                    <div class="stat-value" :style="{ color: stat.color }">
                                        {{ person[stat.field] }}
                                    </div>
                                    <div class="stat-label">{{ stat.label }}</div>
                                </div>
                            </div>
                            <div class="rating-info" v-if="person.chuangJianDuiChuLiPingFen !== undefined">
                                <el-progress 
                                    :percentage="person.chuangJianDuiChuLiPingFen" 
                                    :color="getProgressColor(person.chuangJianDuiChuLiPingFen)"
                                    :stroke-width="8"
                                    :show-text="false" />
                                <div class="rating-labels">
                                    <el-tag size="small" type="info" v-if="person.xiangMuDuiChuLi !== undefined">
                                        评分配比: {{ person.xiangMuDuiChuLi }}%
                                    </el-tag>
                                    <span class="rating-score">评分: {{ person.chuangJianDuiChuLiPingFen }}</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </template>
                <el-empty v-else description="没有找到匹配的人员" />
            </div>
        </div>
        <!-- 人员详情弹框 -->
        <el-dialog v-model="dialogVisible" :title="currentPerson?.name + '的详细信息'" width="60%" top="5vh">
            <div v-if="currentPerson" class="person-detail-dialog">
                <!-- 头部信息区域 -->
                <div class="detail-header">
                    <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                        :on-change="handleAvatarChange" :before-upload="beforeAvatarUpload">
                        <el-avatar :size="100" :src="currentPerson?.avatar" />
                        <div class="avatar-edit-mask">
                            <el-icon>
                                <Edit />
                            </el-icon>
                        </div>
                    </el-upload>
                    <div class="header-info">
                        <h3>{{ currentPerson.name }}</h3>
                        <div class="meta-info">
                            <el-tag :type="getRoleTagType(currentPerson.role)" effect="dark">
                                {{ getRoleName(currentPerson.role) }}
                            </el-tag>
                            <span class="join-date">加入时间: 2023-06-15</span>
                        </div>
                        <div class="progress-container">
                            <span>任务完成率</span>
                            <el-progress :percentage="currentPerson.taskCompletionRate || 0"
                                :color="getProgressColor(currentPerson.taskCompletionRate || 0)" :stroke-width="12"
                                :show-text="false" />
                            <span class="progress-value">{{ currentPerson.taskCompletionRate || 0 }}%</span>
                        </div>
                    </div>
                </div>

                <el-divider />

                <!-- 主体内容区域 -->
                <div class="detail-body">
                    <el-row :gutter="20">
                        <!-- 任务统计 -->
                        <el-col :span="12">
                            <div class="detail-section">
                                <h4 class="section-title">
                                    <el-icon>
                                        <DataAnalysis />
                                    </el-icon>
                                    任务统计
                                </h4>
                                <div class="stats-grid">
                                    <div class="stat-item" v-for="stat in stats" :key="stat.label">
                                        <div class="stat-value" :style="{ color: stat.color }">
                                            {{ currentPerson[stat.field] }}
                                        </div>
                                        <div class="stat-label">{{ stat.label }}</div>
                                    </div>
                                </div>
                                
                                <!-- 评分信息 -->
                                <div class="detail-section" v-if="currentPerson.chuangJianDuiChuLiPingFen !== undefined">
                                    <h4 class="section-title">
                                        <el-icon>
                                            <Star />
                                        </el-icon>
                                        工作评价
                                    </h4>
                                    <div class="rating-detail-card">
                                        <div class="rating-detail-item">
                                            <span class="rating-label">评分:</span>
                                            <el-progress 
                                                :percentage="currentPerson.chuangJianDuiChuLiPingFen" 
                                                :color="getProgressColor(currentPerson.chuangJianDuiChuLiPingFen)"
                                                :stroke-width="12"
                                                :show-text="false" />
                                            <span class="rating-value">{{ currentPerson.chuangJianDuiChuLiPingFen }}/100</span>
                                        </div>
                                        <div class="rating-detail-item" v-if="currentPerson.xiangMuDuiChuLi !== undefined">
                                            <span class="rating-label">评分配比:</span>
                                            <span class="rating-value">{{ currentPerson.xiangMuDuiChuLi }}%</span>
                                        </div>
                                        <div class="rating-comment" v-if="currentPerson.chuangJianDuiChuLiPingYu">
                                            <span class="rating-label">评语:</span>
                                            <p class="comment-text">{{ currentPerson.chuangJianDuiChuLiPingYu }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>

                        <!-- 近期活动 -->
                        <el-col :span="12">
                            <div class="detail-section">
                                <h4 class="section-title">
                                    <el-icon>
                                        <Clock />
                                    </el-icon>
                                    近期活动
                                </h4>
                                <el-timeline>
                                    <el-timeline-item v-for="(activity, index) in recentActivities" :key="index"
                                        :timestamp="activity.time">
                                        {{ activity.content }}
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 技能评估 -->
                    <div class="detail-section">
                        <h4 class="section-title">
                            <el-icon>
                                <Star />
                            </el-icon>
                            技能评估
                        </h4>
                        <div class="skills-container">
                            <div class="skill-item" v-for="skill in skills" :key="skill.name">
                                <span class="skill-name">{{ skill.name }}</span>
                                <el-progress :percentage="skill.level" :stroke-width="12" :show-text="false" />
                                <span class="skill-level">{{ getSkillLevel(skill.level) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <template #footer>
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="sendMessage(currentPerson!)">发送消息</el-button>
                <el-button type="success" @click="assignTask(currentPerson!)">分配任务</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
    GetTeamUsers,// 获取团队人员数据接口
    UploadUserHeadImg,//更换头像
} from "@/api/newDemands/index";


interface Person {
    id: number
    name: string
    position: string
    role: string  // 实际数据中的role是数字字符串
    avatar: string
    developingTasks: number
    completedTasks: number
    testingTasks: number
    overdueTasks: number
    bugs: number
    taskCompletionRate?: number
    xiangMuDuiChuLi?: number // 项目对处理评分配比(%)
    chuangJianDuiChuLiPingFen?: number // 创建对处理评分(0-100)
    chuangJianDuiChuLiPingYu?: string // 创建对处理评语
}

// 角色映射关系
const roleMapping: Record<string, string> = {
    "666": "测试工程师",
    "111": "测试工程师",
    "777": "后端开发",
    "555": "后端开发",
    "222": "运维工程师",
    "333": "产品经理",
    "444": "项目经理",
    "8080": "技术总监",
    "999": "部门经理"
}

interface StatItem {
    label: string
    field: keyof Person
    color: string
}

const persons = ref<Person[]>([])
const searchQuery = ref('')
const roleFilter = ref('')
const isLoading = ref(false)
const dialogVisible = ref(false)
const currentPerson = ref<Person | null>(null)

// 从映射关系中提取可用的角色选项
const roles = computed(() => {
    const uniqueRoles = new Set<string>()
    Object.values(roleMapping).forEach(role => uniqueRoles.add(role))
    return Array.from(uniqueRoles)
})

// 获取角色显示名称
const getRoleName = (roleCode: string) => {
    return roleMapping[roleCode] || "未知角色"
}

const stats: StatItem[] = [
    { label: '开发中', field: 'developingTasks', color: '#409EFF' },
    { label: '提测中', field: 'completedTasks', color: '#67C23A' },
    { label: '测试中', field: 'testingTasks', color: '#E6A23C' },
    { label: '已超时', field: 'overdueTasks', color: '#F56C6C' },
    { label: 'BUG数', field: 'bugs', color: '#909399' }
]

const sortField = ref<keyof Person>('developingTasks')
const sortOrder = ref<'asc' | 'desc'>('desc')

// 修改过滤逻辑
const filteredPersons = computed(() => {
    let result = persons.value

    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(
            person =>
                person.name.toLowerCase().includes(query) ||
                person.position.toLowerCase().includes(query) ||
                getRoleName(person.role).toLowerCase().includes(query)
        )
    }

    if (roleFilter.value) {
        result = result.filter(person => getRoleName(person.role) === roleFilter.value)
    }

    // 排序逻辑保持不变
    if (sortField.value) {
        result = [...result].sort((a, b) => {
            const aValue = a[sortField.value]
            const bValue = b[sortField.value]
            if (typeof aValue === 'number' && typeof bValue === 'number') {
                return sortOrder.value === 'asc' ? aValue - bValue : bValue - aValue
            }
            return 0
        })
    }

    return result
})

// 修改后的getRoleTagType函数
const getRoleTagType = (roleCode: string) => {
    const roleTypes: Record<string, string> = {
        "666": 'info',       // 测试工程师
        "111": 'info',       // 测试工程师
        "777": 'success',    // 后端开发
        "555": 'success',    // 后端开发
        "222": 'warning',    // 运维工程师
        "333": 'danger',     // 产品经理
        "444": 'danger',     // 项目经理
        "888": 'primary',    // 技术总监
        "999": 'primary'     // 部门经理
    }
    return roleTypes[roleCode] || 'info'
}

const getProgressColor = (percentage: number) => {
    if (percentage >= 80) return '#67C23A'
    if (percentage >= 60) return '#E6A23C'
    if (percentage >= 40) return '#409EFF'
    return '#F56C6C'
}

const showDetails = (person: Person) => {
    currentPerson.value = { ...person }
    dialogVisible.value = true
}


interface UploadFile {
    raw: File
    [key: string]: any
}

const handleAvatarChange = async (uploadFile: UploadFile) => {
    if (!currentPerson.value) return

    try {
        // 验证文件
        const isValid = beforeAvatarUpload(uploadFile.raw)
        if (!isValid) return

        isLoading.value = true
        
        // 将文件转换为base64
        const reader = new FileReader()
        const base64String = await new Promise<string>((resolve, reject) => {
            reader.onload = () => resolve(reader.result as string)
            reader.onerror = reject
            reader.readAsDataURL(uploadFile.raw)
        })

        // 提取base64数据部分
        const base64Data = base64String.split(',')[1]
        
        const { data } = await UploadUserHeadImg({ headImg: base64Data })

        if (data.code === 200 && data.data) {
            currentPerson.value.avatar = `data:image/png;base64,${base64Data}`
            // 更新主列表中的头像
            persons.value = persons.value.map(p =>
                p.id === currentPerson.value?.id ? { ...p, avatar: `data:image/png;base64,${base64Data}` } : p
            )
            ElMessage.success('头像更新成功')
        } else {
            ElMessage.error(data.msg || '头像上传失败')
        }
    } catch (error) {
        ElMessage.error('头像上传失败')
        console.error(error)
    } finally {
        isLoading.value = false
    }
}

const beforeAvatarUpload = (file: File) => {
    const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isImage) {
        ElMessage.error('请上传JPG/PNG/GIF图片')
        return false
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过2MB')
        return false
    }
    return true
}

const sendMessage = (person: Person) => {
    ElMessage.success(`消息已发送给 ${person.name}`)
    dialogVisible.value = false
}

const handleSearch = () => {
    // 可以添加防抖逻辑
}

const filterPersons = () => {
    // 过滤逻辑已经在计算属性中处理
}

const calculateCompletionRate = (person: Person) => {
    const totalTasks =
        person.developingTasks + person.completedTasks + person.testingTasks
    if (totalTasks === 0) return 0
    return Math.round((person.completedTasks / totalTasks) * 100)
}

const loadPersons = async () => {
    isLoading.value = true
    try {
        const { data } = await GetTeamUsers({});
        if (data.code == 200) {
            persons.value = data.data.map((person: Person) => {
                // 确保头像数据有效，否则使用默认头像
                const avatar = person.avatar 
                    ? `data:image/png;base64,${person.avatar}`
                    : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
                
                return {
                    ...person,
                    avatar,
                    taskCompletionRate: calculateCompletionRate(person),
                    xiangMuDuiChuLi: person.xiangMuDuiChuLi,
                    chuangJianDuiChuLiPingFen: person.chuangJianDuiChuLiPingFen,
                    chuangJianDuiChuLiPingYu: person.chuangJianDuiChuLiPingYu
                }
            })
        } else {
            ElMessage.error(data.msg)
        }
    } catch (error) {
        ElMessage.error('加载人员数据失败')
        console.error(error)
    } finally {
        isLoading.value = false
    }
}

// 在script部分添加以下内容
interface Activity {
    time: string
    content: string
}

interface Skill {
    name: string
    level: number
}

const recentActivities = ref<Activity[]>([
    { time: '2023-10-15 14:00', content: '完成了任务"用户登录模块开发"' },
    { time: '2023-10-14 10:30', content: '修复了3个BUG' },
    { time: '2023-10-13 16:45', content: '参加了项目进度会议' },
    { time: '2023-10-12 09:15', content: '开始开发新功能模块' }
])

const skills = ref<Skill[]>([
    { name: 'JavaScript', level: 85 },
    { name: 'Vue.js', level: 90 },
    { name: 'HTML/CSS', level: 75 },
    { name: 'Node.js', level: 80 },
    { name: '数据库', level: 70 },
    { name: 'Git', level: 65 }
])

const getSkillLevel = (level: number) => {
    if (level >= 90) return '专家'
    if (level >= 70) return '熟练'
    if (level >= 50) return '一般'
    return '入门'
}

const assignTask = (person: Person) => {
    ElMessage.success(`准备为 ${person.name} 分配任务`)
    dialogVisible.value = false
}


onMounted(() => {
    loadPersons()
})
</script>

<style scoped>
:root {
    --primary-color: #409eff;
    --success-color: #67c23a;
    --warning-color: #e6a23c;
    --danger-color: #f56c6c;
    --info-color: #909399;
    --text-primary: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --border-color: #e4e7ed;
    --bg-color: #f5f7fa;
    --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    --border-radius: 8px;
}

/* 基础布局 */
.person-management {
    padding: 15px 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* 卡片容器 */
.card-container-wrapper {
    flex: 1;
    overflow: auto;
    padding: 4px;
    margin: -4px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 0.5fr));
    gap: 20px;
    padding-bottom: 20px;
}

/* 人员卡片 */
.person-card {
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.person-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.card-header {
    display: flex;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
}

.card-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
}

.header-info {
    margin-left: 16px;
    flex: 1;
    min-width: 0;
}

.header-info h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-info-icon1 {
    position: absolute;
    right: 10px;
    top: 20px;
    cursor: pointer;
    color: #2d8cf0;
}

.header-info-icon2 {
    position: absolute;
    right: 10px;
    bottom: 20px;
    cursor: pointer;
    color: #fc455d;
}

.card-header .el-avatar {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 卡片内容 */
.card-body {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.stat-item {
    text-align: center;
    padding: 10px;
    background-color: var(--bg-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.stat-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    gap: 8px;
}

.action-buttons .el-button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 4px;
}

/* 详情对话框 */
.person-detail-dialog {
    padding: 0 10px;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.avatar-uploader {
    position: relative;
    flex-shrink: 0;
}

.avatar-edit-mask {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.avatar-uploader:hover .avatar-edit-mask {
    opacity: 1;
}

.avatar-edit-mask .el-icon {
    color: white;
    font-size: 24px;
}

.header-info {
    flex: 1;
    min-width: 0;
}

.header-info h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.meta-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.join-date {
    font-size: 14px;
    color: var(--text-secondary);
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

.progress-container span {
    font-size: 14px;
    color: var(--text-regular);
    white-space: nowrap;
}

.progress-value {
    width: 40px;
    text-align: right;
    font-weight: bold;
    color: var(--text-primary);
}

/* 详情内容区域 */
.detail-body {
    margin-top: 16px;
}

.detail-section {
    margin-bottom: 28px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.section-title .el-icon {
    font-size: 20px;
}

/* 任务统计 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stat-item {
    padding: 8px;
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform 0.2s;
}

.stat-item:hover {
    transform: translateY(-2px);
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 技能评估 */
.skills-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skill-name {
    width: 100px;
    font-size: 14px;
    color: var(--text-regular);
}

.skill-level {
    width: 60px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}

/* 评分信息样式 */
.rating-info {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.rating-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.rating-score {
    font-size: 12px;
    color: var(--text-secondary);
}

.rating-detail-card {
    background-color: var(--bg-color);
    padding: 16px;
    border-radius: var(--border-radius);
}

.rating-detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.rating-label {
    width: 80px;
    font-size: 14px;
    color: var(--text-regular);
}

.rating-value {
    margin-left: 12px;
    font-weight: bold;
    color: var(--text-primary);
}

.rating-comment {
    margin-top: 16px;
}

.comment-text {
    margin: 8px 0 0;
    padding: 8px;
    background-color: white;
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .card-container {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 992px) {
    .detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .progress-container {
        max-width: 100%;
    }

    .stats-grid,
    .skills-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar {
        flex-direction: column;
        gap: 12px;
    }

    .search-bar .el-input,
    .search-bar .el-select {
        width: 100% !important;
    }

    .card-container {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .detail-header {
        text-align: center;
        align-items: center;
    }

    .header-info {
        text-align: center;
    }

    .meta-info {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .person-management {
        padding: 16px;
    }

    .card-container {
        grid-template-columns: 1fr;
    }

    .person-card {
        max-width: 100%;
    }
}
</style>